<template>
    <div :style="style" ref="lavContainer"></div>
</template>
  
<script>
import lottie from 'lottie-web'
import {getSvgJsonFile } from "@/api/apiRequst"

export default {
    name: 'Lottie',
    props: {
      timelineData: {
        type: Object,
        required: true,
      },
      height: Number,
      width: Number,
      x: Number,
      y: Number,
      zIndex: Number,
      opacity: Number,
      
    },
    data() {
        return {
          anim:null
            
        };
    },
  
    computed: {
      style() {
        let x = (this.x ? `${this.x}px` : '0')
        let y = (this.y ? `${this.y}px` : '0')
        let data = {
          width: this.width ? `${this.width}px` : '100%',
          height: this.height ? `${this.height}px` : '100%',
          transform: 'translate('+x+','+y+')',
          left:'0',
          top:'0',
          zIndex:this.zIndex,
          opacity:this.opacity
        }
        return data
      },
    },
  
    async mounted() {
      let data = await getSvgJsonFile({url:this.timelineData.actions[0].data.src})
      this.anim = lottie.loadAnimation({
        container: this.$refs.lavContainer,
        renderer: 'svg',
        loop: false,
        autoplay: false,
        animationData: data,
      })
      this.$emit('animCreated', this.anim)
    },
    
    unmounted () {
      this.anim && this.anim.destroy()
    }
  }
  </script>